<template>
	<view>
		<view
			:style="{backgroundImage: 'url('+'/static/backgrounds/cpu.jpg'+')'+';height:1280rpx;background-attachment:fixed'}">
			<!------搜索栏 ---------->
			<view class="flex align-center bg-white">
				<view>
					<image src="/static/logo.svg" class="logo"></image>
				</view>
				<view class="flex padding-xs basis-xl radius  align-center margin-lg solids">
					<view><input /></view>
					<view class="cuIcon-search"></view>
				</view>
				<view>
					<image src="../../static/user.svg" class="cu-avatar round margin-sm" @tap="login"></image>
				</view>
			</view>
			<!-------分割线---------->
			<scroll-view scroll-y style="height: 1000rpx;">
				<!-------中央处理器对比 -->
				<view v-for="(prod,index) in ['cpu','gpu','mem','disk','os','db','nic','support']"
					class=" bg-white margin-lg text-center" style="border-radius: 40rpx;">
					<text v-if="prod=='cpu'" class="text-xl">中央处理器</text>
					<text v-if="prod=='gpu'" class="text-xl">图形处理器</text>
					<text v-if="prod=='mem'" class="text-xl">内存</text>
					<text v-if="prod=='disk'" class="text-xl">磁盘</text>
					<text v-if="prod=='os'" class="text-xl">操作系统</text>
					<text v-if="prod=='db'" class="text-xl">数据库</text>
					<text v-if="prod=='nic'" class="text-xl">网卡</text>
					<text v-if="prod=='support'" class="text-xl">服务与支持</text>
					<view class="padding bg-white " style="border-radius: 40rpx;">
						<view class="flex justify-content: center">
							<view v-for="(car_item,car_index) in [0,1]"
								:style="car_index==0?'background-color: #59AAFF;border-radius:50rpx':'background-color: #F37B1D;border-radius:50rpx'"
								class="margin-right-xl flex-sub bg-blue padding-sm margin-xs radius text-center">
								<view>
									<view v-if="prod=='cpu'">
										<view v-show="shoppingcar.cars[car_index].cpu.numberOfCores!=undefined">
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index][prod].numberOfCores}}核
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index][prod].price}}元/月
											</view>
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index][prod].clockSpeed}}GHz
											</view>
										</view>
									</view>
									<view v-if="prod=='gpu'">
										<view v-show="shoppingcar.cars[car_index].gpu.gpuMemory!=undefined">
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].gpu.gpuMemory}}TFLOPS
											</view>
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].gpu.calcCapability}}GB显存
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].gpu.price}}元/月
											</view>
										</view>
									</view>
									<view v-if="prod=='mem'">
										<view v-show="shoppingcar.cars[car_index].mem.capacity!=undefined">
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].mem.capacity}}GB
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].mem.price}}元/月
											</view>
										</view>
									</view>
									<view v-if="prod=='disk'">
										<view v-show="shoppingcar.cars[car_index].disk.capacity!=undefined">
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].disk.capacity}}GB
											</view>
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].disk.throughput}}MB/s
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].disk.price}}元/月
											</view>
										</view>
									</view>
									<view v-if="prod=='os'">
										<view v-show="shoppingcar.cars[car_index].os.name!=undefined">
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].os.name}}</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].os.osBit}}位</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].os.loginMethod}}登录
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].os.price}}元/月
											</view>
										</view>
									</view>
									<view v-if="prod=='db'">
										<view v-show="shoppingcar.cars[car_index].db.price!=undefined">
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].db.capacity}}GB
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].db.price}}元/月
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].db.provider}}
											</view>
										</view>
									</view>
									<view v-if="prod=='nic'">
										<view v-show="shoppingcar.cars[car_index].nic.bandwidth!=undefined">
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].nic.bandwidth}}M/S带宽
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].nic.price}}元/月
											</view>
										</view>
									</view>
									<view v-if="prod=='support'">
										<view v-show="shoppingcar.cars[car_index].support.response!=undefined">
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].support.response}}小时报修
											</view>
											<view class="margin:auto  ">
												{{shoppingcar.cars[car_index].support.present}}小时到场
											</view>
											<view class="margin:auto  ">{{shoppingcar.cars[car_index].support.price}}元/月
											</view>
										</view>
									</view>
									<view v-show="shoppingcar.cars[car_index][prod].price==undefined">
										<view class="margin:auto  ">未选择</view>
									</view>
									<button class="margin-right-sm mini-btn  cu-btn round  align-center"
										@click="gotoshop(index)">
										<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
										</image>
									</button>
									<button class="mini-btn  cu-btn round  align-center"
										@click="removeItem(prod,car_index)">
										<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
										</image>
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!----------------------------------- 底部购物车 -->

				<view style="position: fixed;bottom: 0;width:100%;background-color: #EBECF1;" class="flex padding-sm">
					<view class="flex-twice flex align-center">
						<image class="margin-left-xl" src="/static/backgrounds/car_blue.svg"
							style="height: 60rpx;width: 60rpx;"></image>
						<view class="margin-left-sm">
							<view class="flex align-center">产品<view class="text-xl text-blue">
									{{shoppingcar.cars[0].itemCount}}
								</view>件
							</view>
							<view class="flex align-center">总价<view class="text-xl text-blue">
									{{shoppingcar.cars[0].totalPrice}}
								</view>元
							</view>
						</view>
					</view>

					<view class="flex-twice flex align-center">
						<image class="margin-left-xl" src="/static/backgrounds/car_orange.svg"
							style="height: 60rpx;width: 60rpx;"></image>
						<view class="margin-left-sm">
							<view class="flex align-center">产品<view class="text-xl text-orange">
									{{shoppingcar.cars[1].itemCount}}
								</view>
								件
							</view>
							<view class="flex align-center">总价<view class="text-xl text-orange">
									{{shoppingcar.cars[1].totalPrice}}
								</view>
								元
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				shoppingcar: null
			}
		},

		onShow() {
			this.shoppingcar = this.$shoppingcar
			console.log(this.shoppingcar);

		},
		methods: {
			gotoshop(index) {
				uni.navigateTo({
					url: '/pages/details/common_info?select=' + index
				});
			},
			//index 
			removeItem(name, carId) {
				var opPrice = this.$shoppingcar.cars[carId][name].price
				if (opPrice == undefined)
					return
				if (this.$shoppingcar.cars[carId].itemCount <= 0) {
					return
				} else {
					this.$shoppingcar.cars[carId].totalPrice -= opPrice
					this.$set(this.$shoppingcar.cars[carId], name, {})
					this.$shoppingcar.cars[carId].itemCount -= 1
				}

				// if (name == 'cpu') {
				// this.$shoppingcar.cars[carId].cpu = {}
				// this.$shoppingcar.cars[carId].cpu.price = null
				console.log("test1 " + this.$shoppingcar.cars[carId]);
				console.log("name " + name);
			}
		}
	}
</script>

<style>
	.myavatar {
		width: 100rpx;
		height: 100rpx;
	}

	.logo {
		width: 200rpx;
		height: 175rpx;
	}
</style>